<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="/lib/mui/css/mui.css">
    <link rel="stylesheet" href="/lib/fontawesome/css/font-awesome.css">
    <link rel="stylesheet" href="/css/common.css">
    <link rel="stylesheet" href="/css/category/category.css">
</head>

<body>
    <!-- 头部 -->
    <header class="pyg_header">
        <div class="mui-input-row mui-search">
            <input type="search" class="mui-input-clear" placeholder="">
        </div>
    </header>

    <!-- 中间区域-->
    <div class="pyg_view">
        <!-- 左侧导航区域 -->
        <div class="left">
            <ul></ul>
        </div>
        <!-- 右侧商品区域 -->
        <div class="right">

        </div>
    </div>

    <!-- 尾部 -->
    <footer class="pyg_footer">
        <a href="/index.html">
            <span class="fa fa-home"></span>
            <span class="link_name">首页</span>
        </a>
        <a href="/pages/category.html">
            <span class="fa fa-list-ul"></span>
            <span class="link_name">分类</span>
        </a>
        <a href="javascript:;">
            <span class="fa fa-shopping-cart"></span>
            <span class="link_name">购物车</span>
        </a>
        <a href="/pages/login.html">
            <span class="fa fa-user"></span>
            <span class="link_name">我的</span>
        </a>
    </footer>

</body>
<script src="/lib/mui/js/mui.js"></script>
<script src="/lib/arttemplate/template-web.js"></script>
<script src="/lib/iscroll/iscroll.js"></script>
<script src="/lib/zepto/zepto.js"></script>
<script src="/js/common.js"></script>
<script src="/js/category.js"></script>
<!-- <script src="/a.js"></script> -->
</html>



<!-- 模板引擎 -->

<!-- 左侧菜单 -->
<script type="text/html" id="left_id">
    {{each arr value index}}
        <!-- 默认第一个元素高亮 -->
        {{if index ==0}}
        <li data-index="{{index}}" class="active">
            {{value.cat_name}}
        </li>
        {{/if}}
        {{if index !=0}}
        <li data-index="{{index}}">
            {{value.cat_name}}
        </li>
        {{/if}}
    {{/each}}

</script>

<!-- 右侧模板 -->
<script type="text/html" id="right_id">
    {{each arr value index}}
        <div class="goods_group">
            <div class="goods_title">
                <span>{{value.cat_name}}</span>
                <span></span>
            </div>
            <ul>
                <!-- li也需要一次遍历 -->
                {{each value.children value2 index2}}
                    <li>
                        <!-- 点击超链接跳转页面，传输当前点击的a标签id -->
                        <a href="/pages/good_list.html?cid={{value2.cat_id}}">
                            <img src="{{$imports.iconUrl}}{{value2.cat_icon}}" alt="">
                            <div class="goods_name">
                                {{value2.cat_name}}
                            </div>
                        </a>
                    </li>
                {{/each}}
            </ul>
        </div>
    {{/each}}
</script>